<template>
  <div class="classify">
    <!-- 头部导航 -->
    <van-sticky>
      <van-nav-bar
        title="分类"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </van-sticky>
    <!-- 搜索框 -->
    <van-sticky :offset-top="46">
      <form action="/">
        <van-search
          @search="onSearch"
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
        />
      </form>
    </van-sticky>
    <!-- 分类侧边栏 -->
    <!-- 如果没有搜索到就显示分类页面 -->
    <div class="fenlei" v-if="searchResultList.length <= 0">
      <div class="sidebar">
        <van-sticky :offset-top="100">
          <van-sidebar style="top: 50px" v-model="activeKey">
            <van-sidebar-item title="手机数码" @click="itemName = 'PhoNe'" />
            <van-sidebar-item
              title="家用电器"
              @click="itemName = 'AppLiance'"
              style="height=54px"
            />
            <van-sidebar-item
              title="出行穿戴"
              @click="itemName = 'TraveLwear'"
            />
            <van-sidebar-item title="智能路由" @click="itemName = 'SmArt'" />
            <van-sidebar-item title="电源配件" @click="itemName = 'PaRts'" />
            <van-sidebar-item title="手提电脑" @click="itemName = 'PcList'" />
            <van-sidebar-item title="智能电视" @click="itemName = 'TvList'" />
          </van-sidebar>
        </van-sticky>
        <keep-alive><component :is="itemName" /></keep-alive>
      </div>

      <!-- 分类对应商品 -->
    </div>
  </div>
</template>

<script>
import PcList from "../../components/shop/PcList.vue";
import AppLiance from "../../components/shop/AppLiance.vue";
import PaRts from "../../components/shop/PaRts.vue";
import PhoNe from "../../components/shop/PhoNe.vue";
import SmArt from "../../components/shop/SmArt.vue";
import TraveLwear from "../../components/shop/TraveLwear.vue";
import TvList from "../../components/shop/TvList.vue";
// import {  Appliance } from "@/config/http";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      //手机列表(默认页面)
      phoneList: [],
      //分类商品列表
      classifyList: [],
      //搜索结果列表
      searchResultList: [],

      // TravelWear: [],

      showPopover: false,

      itemName: "PcList",
      
      Appliancelist:[]
    };
  },
 
  components: { PcList, AppLiance, PaRts, PhoNe, SmArt, TraveLwear, TvList },
  computed: {},
  watch: {},

  methods: {
    //返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
    // this.$router.push('/cart')
    },
    //搜索框事件
    onSearch(){
     
      console.log();
    },

    async goDetail() {

    },
   
  },

  created() {
    // this.TravelWearList();
  },

  mounted() {},
};
</script>

<style scoped></style>
